<template>
  <div class="warp containerT">
  	<div class="header">
      <div class="return-icon" @click="back();"></div>
      <div class="name">缓存管理</div>
      <div class="name"></div>
    </div>


    <div class="cache-box">
    	<div class="cache-list">
    		<h3>未缓存</h3>
    		<div class="list">
    			<div class="item">
    				<img src="../assets/images/book.png" class="item-img">
    				<div class="info">
    					<h3>标题</h3>
    					<p>已完成：44%</p>
    					<div class="bar">
    						<span></span>
    					</div>
    				</div>

    				<span class="btn pause"></span>
    			</div>
    		</div>
    		<div class="list">
    			<div class="item">
    				<img src="../assets/images/book.png" class="item-img">
    				<div class="info">
    					<h3>标题</h3>
    					<p>已暂停：44%</p>
    					<div class="bar">
    						<span></span>
    					</div>
    				</div>

    				<span class="btn down"></span>
    			</div>
    		</div>
    	</div>

    	<div class="cache-list complete-list">
    		<h3>已缓存</h3>
    		<div class="list">
    			<div class="item">
    				<img src="../assets/images/book.png" class="item-img">
    				<div class="info">
    					<h3>标题</h3>
    					<p>已缓存</p>
    					<div class="bar">
    						<span></span>
    					</div>
    				</div>

    				<span class="btn ok"></span>
    			</div>
    		</div>
    		<div class="list">
    			<div class="item">
    				<img src="../assets/images/book.png" class="item-img">
    				<div class="info">
    					<h3>标题</h3>
    					<p>已缓存</p>
    					<div class="bar">
    						<span></span>
    					</div>
    				</div>

    				<span class="btn ok"></span>
    			</div>
    		</div>
    	</div>
    </div>

  </div>
</template>
<script>

    export default {
    	name: 'bookCache',
    	components: {

	    },
    	data () {
      		return {

	      	}
	    },
	    mounted(){

	    },
	    methods:{
	      	back(){
	        	this.$router.go('-1')
	      	},
          menuToggle(){
            this.menuShow = !this.menuShow;
          }
	    }
  	}
</script>
<style lang="scss" scoped>
	.cache-box{
		.complete-list{
			.bar span{
				width:100% !important;
			}
		}
		.cache-list{
			padding:30px 30px 0;
			h3{
				font-size:38px;
				color:#656565;
				line-height:80px;
				font-weight: normal;
				margin-bottom:20px;
			}
			.list{
				.item{
					position: relative;
					margin-bottom: 60px;
					padding-left:130px;
					.btn{
						position: absolute;
						top:50%;
						right:0;
						width:50px;
						height:50px;
						margin-top:-25px;
						&.pause{
							background:url(../assets/images/icon/pause-icon1.png) no-repeat 0 0/100% auto;
						}
						&.down{
							background:url(../assets/images/icon/down-icon2.png) no-repeat 0 0/100% auto;
						}
						&.ok{
							background:url(../assets/images/icon/ok-icon1.png) no-repeat 0 0/100% auto;
						}
					}
					.item-img{
						position: absolute;
						left:0;
						top:0;
						width:105px;
					}
					.info{
						padding-right:70px;
						h3{
							font-size:45px;
							margin-bottom:10px;
							line-height: 1.5;
							overflow:hidden;
							text-overflow:ellipsis;
							white-space:nowrap;
							font-weight: normal;
							color:#333;
						}
						p{
							color:#999999;
							font-size:28px;
							margin-bottom:10px;
						}
						.bar{
							width:100%;
							height:5px;
							background-color:#ebebeb;
							border-radius:4px;
							span{
								display:block;
								width:10%;
								height:100%;
								background-color:#ccdcff;
							}
						}
					}
				}
			}
		}
	}
</style>
